<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="银行卡到账"></TopNav>
		<view class="bank-item radius m-b10" :class="{'radio-check':radioCurrent === index}"
			v-for="(item,index) in bankList" :key="item.id" @click="handleToPage(item)">
			<view class="flex align-center">
				<!-- <image src="/static/images/index/zhifubao.png" class="width-24 height-24" mode=""></image> -->
				<text class="m-l12 text-bold f-s15">{{item.bank}}</text>
				<text class="text-gray m-l8 f-s15">储蓄卡({{item.account.slice(-4)}})</text>
			</view>
			<view class="" v-if="isSelect">
				<image src="/static/images/index/radio-check.png" class="width-18 height-18" mode=""
					v-if="radioCurrent === index" @click.stop="radioCurrent = ''"></image>
				<image src="/static/images/index/radio.png" class="width-18 height-18" mode="" v-else
					@click.stop="radioCurrent = index"></image>
			</view>

		</view>
		<view class="m-t10 p-t14 p-b14 flex justify-center bg-white radius" @click="handleToPage">
			<image src="/static/images/index/plus.png" class="width-20 height-20" mode=""></image>
			<text class="m-l6 f-s15" style="color: #121924;">添加新的银行卡</text>
		</view>
		<view class="fixed-bottom bg-white full-width p-lr16">
			<view class="self-btn full-width" hover-class="pressed" @click="handleSubmit">
				<text>确认</text>
			</view>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import {
		withdrawAccount
	} from "@/api/mine/pay.js"
	export default {
		name: "",
		data() {
			return {
				isSelect: true, // 是否有选择按钮 
				radioCurrent: '',
				bankList: [],
				realNameInfo: {}
			}
		},
		onLoad(query) {
			if (query.select === 'none') this.isSelect = false;
			(async () => {
				await this.getList()
				if (query.account) {
					let index = this.bankList.findIndex(item => item.account === query.account)
					if (index !== -1) this.radioCurrent = index
				}
			})()
			uni.$on('bankAdd', this.handleBankAdd)
		},
		onUnload() {
			uni.$off('bankAdd', this.handleBankAdd)
		},
		methods: {
			handleSubmit() {
				if (isNaN(this.radioCurrent)) {
					this.$toast('您未选择任何银行卡')
				} else {
					let bankInfo = this.bankList[this.radioCurrent]
					uni.$emit('accountSelect', {
						...bankInfo,
						type: 'bank',
						typeName: bankInfo['bank'],
						bankType: '储蓄卡'
					})
					this.$tab.navigateBack()
				}

			},
			async getList() {
				await withdrawAccount().then(res => {
					let {
						data: {
							bank,
							technician_identity
						}
					} = res
					this.bankList = bank || []
					this.realNameInfo = technician_identity || {}
				})
			},
			handleBankAdd() {
				this.getList()
			},

			handleToPage(selected) {
				let selectedInfo = ''
				if (selected.id) {
					let {
						id,
						realname,
						account,
						bank
					} = selected
					selectedInfo = encodeURIComponent(JSON.stringify({
						id,
						realname,
						account,
						bank,
						title: '编辑银行卡'
					}))
				} else {
					selectedInfo = encodeURIComponent(JSON.stringify({
						realname: this.realNameInfo.realname
					}))
				}
				this.$tab.navigateTo("bank-bind?info=" + selectedInfo)
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx 24rpx;

		.bank-item {
			padding: 40rpx 32rpx 40rpx 24rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
		}
	}
</style>